<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <link rel="stylesheet" href="./css/index.css">
  <style>
      .el-textarea__inner, .el-input__inner {
          background: transparent !important;
          border: 2px solid hsla(0, 0%, 100%, .7);
      }

      [v-cloak] {
          display: none;



      }
  </style>
</head>
<body style="background-color: #161823;height: 100%;color:#87878e;font-size: 14px">
<div id="app" v-cloak>
  <el-container>
    <!-- 1.左主体 -->
    <my-aside></my-aside>
    <!-- 2.右边栏 -->
    <el-main>
      <!-- 2.1右头边栏 -->
      <my-header></my-header>
      <!-- 2.2右主体 -->
      <el-footer style="margin-top:20px;background-repeat: no-repeat;background-size: 100% ">
        <!-- 2.2右主体视频 -->
        <div style="margin: 0 auto;width: 500px;">
          <el-form style="color: white" label-width="80px">
            <el-form-item>
              <h1 style="font-size: 30px">登录
                <span style="float: right;font-size: 15px">
                  <a href="./reg.html"
                     style="color: #0aa1ed;text-decoration: none">还未注册?立马注册</a>
                </span>
              </h1>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input type="text" placeholder="请输入用户名/手机号/邮箱" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>

            <el-form-item style="float:left;">
              <el-button
                type="primary" style="float: left" @click="login()">登录
              </el-button>
              <a style="float:left;color: #0aa1ed;text-decoration: none;margin-left: 20px" href="">
                QQ登录或者扫码
              </a>
            </el-form-item>
          </el-form>
        </div>
      </el-footer>
    </el-main>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.js"></script>
<!--引入Axios框架-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="js/aside.js"></script>
<script src="js/header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
              user:{
                username:"",
                password:""
              },
                appArr: [
                    {title: '直播'},
                    {title: '放映室'},
                    {title: '知识'},
                    {title: '热点'},
                    {title: '游戏'},
                    {title: '娱乐'},
                    {title: '二次元'},
                    {title: '音乐'},
                    {title: '美食'},
                    {title: '体育'},
                    {title: '时尚'}
                ]
            }
        },
        methods: {
          login() {
            axios.post("/v1/user/login",v.user).then(function (response) {
              if (response.data.code==1000) {
                localStorage.setItem("user",JSON.stringify(response.data.data));
                location.href="/index.html";
              }else {
                v.$message.error(response.data.msg);
              }
            })
          }
        }
    })
</script>
</html>